<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../js/element-index.css">
    <script src="../js/element-index.js"></script>
    <script src="../js/echarts.min.js"></script>
    <style>
        #t {
            width: 80%;
            height: auto;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="t" style="align-content: center">
    <!--  注册  -->
    <div>
        <el-autocomplete
                v-model="userData.name"
                placeholder="name"
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.password"
                placeholder="password"
        ></el-autocomplete>
        <el-button @click="register()">
            注册
        </el-button>
    </div>
    <hr/>
    <!--   登陆/退出 -->
    <div>
        <el-autocomplete
                v-model="userData.name"
                placeholder="用户名"
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.password"
                placeholder="密码"
        ></el-autocomplete>
        <el-button @click="login()" type="info">
            登陆
        </el-button>
        <el-button @click="layout()">
            退出
        </el-button>
    </div>
    <hr/>
    <!--  查询/修改  -->
    <div>
        <el-autocomplete
                v-model="userData.id"
                placeholder="id"
                disabled
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.name"
                placeholder="name"
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.password"
                placeholder="password"
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.phone"
                placeholder="phone"
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.sex"
                placeholder="sex"
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.idNumber"
                placeholder="idNumber"
        ></el-autocomplete>
        <el-autocomplete
                v-model="userData.avatar"
                placeholder="avatar"
        ></el-autocomplete>
        <el-upload
                :disabled="false"
                :http-request="uploadImages"
                mulitple
                accept=".bmp, .png, .jpg, .word, .xlsx, .xls, .ppt, .pdf, .zip, .war, .rar, .exe, .jar">
            <el-button type="primary">更改图片</el-button>
        </el-upload>
        <el-image :src="'http://localhost:8889/api/commons/download?name='+userData.avatar"
                  style="width: 200px; height: auto">
        </el-image>
        <el-autocomplete
                v-model="userData.status"
                placeholder="status"
        ></el-autocomplete>
        <el-button @click="selectone()">
            查询
        </el-button>
        <el-button @click="reset()">
            重置
        </el-button>
        <el-button @click="update2()" type="danger">
            确认修改
        </el-button>
    </div>
    <hr/>
    <!--  查询分类  -->
    <el-button @click="selectCategory()">
        进入点餐页面
    </el-button>
    <div style="width: 100%;height: 800px;">
        <div style="width: 15%; height: 800px; float: left">
            <el-table
                    :data="category.data"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        alion="center"
                        label="点餐"
                        width="180" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button
                             @click="getDishOrSetmealOfCategory(scope.row.type, scope.row.id)">{{scope.row.name}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="width: 45%;height: 800px; float: left">
            <el-table
                    :data="rightlist.data"
                    style="width: 100%" >
                <el-table-column
                        prop="image"
                        alion="center"
                        width="180">
                    <template slot-scope="scope">
                        <el-image :src="'http://localhost:8889/api/commons/download?name='+scope.row.image"
                                  style="width: auto; height: 130px">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        alion="center"
                        label="商品"
                        width="180">
                    <template slot-scope="scope">
                        <el-button
                                @click="showInfo(scope.row.description)">{{scope.row.name}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        alion="center"
                        width="180">
                    <template slot-scope="scope">
                        <el-button
                                size="big"
                                @click="showInfo(scope.row.price)">¥{{scope.row.price}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="addToShoppingCart(scope.row)">+
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="width: auto;height: 800px; float: left;border-left: #555555 2px solid;;border-right: #555555 2px solid">
            <div style="margin-left: 40px; margin-right: 40px">
                <el-button @click="selectcards()">
                    购物车查询
                </el-button>
                <hr/>
                <!--  地址查询  -->
<!--                <el-button @click="selectone()">-->
<!--                    地址查看-->
<!--                </el-button>-->
<!--                <hr/>-->
                <!--  默认地址修改  -->
<!--                <el-button @click="selectone()">-->
<!--                    默认地址修改-->
<!--                </el-button>-->
<!--                <hr/>-->
            </div>
        </div>
        <div style="width: 320px;height: 800px; float: left">
            <div style="margin-left: 40px;">
                <el-table
                        :data="userCards.data"
                        style="width: 100%" >
                    <el-table-column
                            prop="image"
                            alion="center"
                            label="已选商品"
                            width="120">
                        <template slot-scope="scope">
                            <el-image :src="'http://localhost:8889/api/commons/download?name='+scope.row.image"
                                      style="width: auto; height: 40px">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            alion="center"
                            label="数量"
                            width="60">
                        <template slot-scope="scope">
                            <el-button
                                    @click="showInfo(scope.row.number)">{{scope.row.number}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <hr/>
                <div>
                    <el-button @click="" style="margin-left: 70%" size="large">
                        ¥{{this.sumPrice}}
                    </el-button>
                </div>
                <hr/>
                <el-button @click="pay()" style="margin-left: 70%" type="success">
                    去结算
                </el-button>
            </div>
        </div>
    </div>

</div>
<script>
    axios.defaults.withCredentials = true; <!--  允许浏览器携带cookie  -->
    var t = new Vue({
        el: "#t",
        data: {
            userData: {
                id: "",
                name: "",
                password: "",
                phone: "",
                sex: "",
                idNumber: "",
                avatar: "",
                status: 0,
            },
            picData: "",
            picURL: "0a623f3f-b70a-4bce-84da-cf548723bb3c.jpg",
            category: {
                data: "",
            },
            rightlist: {
                data: "",
            },
            rightListType: 1,
            shoppingcart: {
                name: "",
                image: "",
                userId: 0,
                dishId: 0,
                dishFlavor: "",
                number: 1,
                amount: 0.0,
            },
            shoppingList: {
                data: "",
            },
            userCards: {
                data: ""
            },
            sumPrice: 0,

        },

        methods: {
            pay() {
                if (this.sumPrice < 0.001) {
                    this.$message.info("你的购物车是空的");
                } else {
                    axios.get("http://localhost:8889/api/shoppingCarts/pay/" + this.userData.id).then((res) => {
                        if (res.data.flag) {
                            this.$message.success(res.data.msg);
                        }
                    });
                }

            },
            selectcards() {
                axios.get("http://localhost:8889/api/shoppingCarts/getcarts/" + this.userData.id).then((res) => {
                    if (res.data.flag) {
                        this.userCards.data = res.data.data;
                        // 计算总金额
                        this.sumPrice = 0;
                        for (let i = 0; i < this.userCards.data.length; i++) {
                            this.sumPrice += this.userCards.data[i].amount;
                        }
                        this.sumPrice = parseFloat(this.sumPrice.toFixed(2));

                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });



            },
            addToShoppingCart(a) {
                this.shoppingcart.image = a.image;
                this.shoppingcart.userId = this.userData.id;
                this.shoppingcart.dishId = a.id;
                this.shoppingcart.dishFlavor = "";
                this.shoppingcart.number = 1;
                this.shoppingcart.amount = a.price;
                if (this.rightListType === 1) {// dish
                    this.shoppingcart.name = "dish";
                } else if(this.rightListType === 2) {// setmeal
                    this.shoppingcart.name = "setmeal";
                }
                axios.post("http://localhost:8889/api/shoppingCarts", this.shoppingcart).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            showInfo(info) {
                this.$message.info(info);
            },
            getDishOrSetmealOfCategory(type, id) {
                this.rightListType = type;
                if (type === 1) {   // dish
                    axios.get("http://localhost:8889/api/dishs/getbycategory/" + id).then((res) => {
                        if (res.data.flag) {
                            this.rightlist.data = res.data.data;
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                } else if(type === 2) { // setmeal
                    axios.get("http://localhost:8889/api/setmeals/getbycategory/" + id).then((res) => {
                        if (res.data.flag) {
                            this.rightlist.data = res.data.data;
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                }
            },
            selectCategory() {
                axios.get("http://localhost:8889/api/categorys/").then((res) => {
                    if (res.data.flag) {
                        this.category.data = res.data.data;
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            downloadImages(val) {
                axios.get("http://localhost:8889/api/commons/download/?name=" + val).then((res) => {
                    this.$message.success("success");
                });
            },
            uploadImages(val) {
                this.picData = new FormData();
                this.picData.append('file', val.file);
                axios.post(
                    "http://localhost:8889/api/commons/upload",
                    this.picData,
                    {
                        headers: {'Content-Type': 'multipart/form-data'}
                    }
                ).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                        this.userData.avatar = res.data.msg;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            update2() {
                axios.put("http://localhost:8889/api/users/", this.userData).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            delete2() {
                axios.delete("http://localhost:8889/api/employees/" + this.id).then((res) => {
                    this.res.flag = res.data.flag;
                    this.res.msg = res.data.msg;
                    this.res.data = res.data.data;
                    console.log(res.data.flag);
                    console.log(res.data.msg);
                    console.log(res.data.data);
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            reset() {
                this.userData = {
                    id: this.userData.id,
                    name: "",
                    password: "",
                    phone: "",
                    idNumber: "",
                    avator: "",
                    status: 0,
                };
            },
            select2() {
                axios.get("http://localhost:8889/api/employees/" + this.id).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            select() {
                axios.get("http://localhost:8889/api/employees").then((res) => {
                    this.res.flag = res.data.flag;
                    this.res.msg = res.data.msg;
                    this.res.data = res.data.data;
                    console.log(res.data.flag);
                    console.log(res.data.msg);
                    console.log(res.data.data);
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            selectone() {
                axios.get("http://localhost:8889/api/users/" + this.userData.id).then((res) => {
                    this.userData = res.data.data;

                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            register() {
                axios.post("http://localhost:8889/api/users", this.userData).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            login() {
                axios.post("http://localhost:8889/api/users/login", this.userData).then((res) => {
                    this.userData.id = res.data.data.id;
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            layout() {
                axios.post("http://localhost:8889/api/users/layout").then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            }
        }
    })
</script>
</body>
</html>